import floor from '../../assets/img/floor.jpg'

export let load2 = (lng, lat, map) => {
    // let svgCy = '<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">\n' +
    //     '  <defs>\n' +
    //     '    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">\n' +
    //     '      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />\n' +
    //     '      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />\n' +
    //     '    </linearGradient>\n' +
    //     '  </defs>\n' +
    //     '  <circle cx="50" cy="100" r="50" fill="floor" />\n' +
    //     '</svg>';


    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "100");
    svg.setAttribute("height", "200");
    var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", "50");
    circle.setAttribute("cy", "100");
    circle.setAttribute("r", "50"); // 半径约为5公里在地图上的像素表示（取决于缩放级别和投影）
    circle.setAttribute("fill", floor);
    svg.appendChild(circle);

    var image = new Image();
    image.src = 'data:image/svg+xml;base64,' + btoa(new XMLSerializer().serializeToString(svg));

    map.addImage('cylinder', image, { pixelRatio: 2 });

    map.addLayer({
        'id': 'cylinder-layer',
        'type': 'symbol',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [lng, lat] // lng 和 lat 是圆柱体的中心点坐标
                }
            }
        },
        'layout': {
            'icon-image': 'cylinder',
            'icon-size': 0.5 // 根据实际大小调整大小，这里的值仅为示例，需要根据实际地图比例尺调整
        }
    });
};
